<template>
	<view class="content">
		<!--顶部tab-->
		<view class="content_1">
			<view class="tab_view">
				<view class="tab_box" @click="changeTab(1)">
					<view class="tab_name">全部</view>
					<view class="tab_line" v-if="tabid == '1'"></view>
				</view>
				<view class="tab_box" @click="changeTab(2)">
					<view class="tab_name">待入住</view>
					<view class="tab_line" v-if="tabid == '2'"></view>
				</view>
				<view class="tab_box" @click="changeTab(3)">
					<view class="tab_name">待续租</view>
					<view class="tab_line" v-if="tabid == '3'"></view>
				</view>
				<view class="tab_box" @click="changeTab(4)">
					<view class="tab_name">待退租</view>
					<view class="tab_line" v-if="tabid == '4'"></view>
				</view>
				<view class="tab_box" @click="changeTab(5)">
					<view class="tab_name">已退租</view>
					<view class="tab_line" v-if="tabid == '5'"></view>
				</view>
			</view>
		</view>
		<!--订单详细-->
		<view class="content_2">
			<block v-for="(item_renterorder, index_renterorder) in renterorderList" :key='index_renterorder'>
				<!-- 显示全部列表 -->
				<view v-if="tabid == '1'">
					<view class="house_view">
						<view class="house_renter">
							<!-- <view class="renter_state" v-if="item_renterorder.room_pay_status == '1'">待入住</view>
							<view class="renter_state" v-if="item_renterorder.room_pay_status == '2'">入住成功</view>
							<view class="renter_state" v-if="item_renterorder.room_pay_status == '3'">待退租</view>
							<view class="renter_state" v-if="item_renterorder.room_pay_status == '4'">退款成功</view>
							<view class="renter_state" v-if="item_renterorder.room_pay_status == '5'">待续租</view> -->
							<view class="renter_state">{{item_renterorder.status.msg}}</view>
							<view class="renter_info">
								<image class="renter_img" :src="item_renterorder.user_avatar"></image>
								<view class="renter_name">{{item_renterorder.customer_name}}</view>
							</view>
							<view class="renter_tips_view">
								<view class="renter_tips">{{item_renterorder.real_name}}</view>
								<view class="renter_tips">{{item_renterorder.house_name}}</view>
								<view class="renter_tips">{{item_renterorder.show_name}}</view>
							</view>
							<view class="renter_phone">{{item_renterorder.customer_phone}}</view>
						</view>
						<view class="house_detail">
							<view class="house_name">{{item_renterorder.house_name}}</view>
							<view class="house_info">{{item_renterorder.house_direction}}·{{item_renterorder.house_area}}·{{item_renterorder.house_floor}}</view>
							<view class="house_info">{{item_renterorder.house_addr}}</view>
							<!-- <view class="house_tips">
								<view class="tips">{{item_renterorder.house_tips1}}</view>
								<view class="tips">{{item_renterorder.house_tips2}}</view>
							</view> -->
							<view class="house_money">¥ {{item_renterorder.house_money}}/月</view>
						</view>
					</view>
					<view class="btn_2" v-if="item_renterorder.status.status == 2 ">
		<view class="btn_submit" style="background-color: #999999;margin-left: 330upx;" @click="cancel(index_renterorder)">拒绝入住</view>
		<view class="btn_submit" style="background-color: #63D0D5;margin-left: 20upx;" @click="confirm(index_renterorder)">确认入住</view>
					</view>
					<view class="btn_2" v-if="item_renterorder.status.status == 3 ">
		<view class="btn_submit" style="background-color: #999999;margin-left: 330upx;" @click.stop="reject(index_renterorder)" >拒绝退款</view>
		<view class="btn_submit" style="background-color: #63D0D5;margin-left: 20upx;" @click.stop="refund(index_renterorder)" >同意退款</view>
					</view>
				</view>

				<!-- 显示待入住 -->
				<view v-if="tabid == '2' && renterorderList[index_renterorder].status.status == '2'">
					<view class="house_view">
						<view class="house_renter">
							<view class="renter_state">{{item_renterorder.status.msg}}</view>
							<view class="renter_info">
								<image class="renter_img" :src="item_renterorder.user_avatar"></image>
								<view class="renter_name">{{item_renterorder.customer_name}}</view>
							</view>
							<view class="renter_tips_view">
								<view class="renter_tips">{{item_renterorder.real_name}}</view>
								<view class="renter_tips">{{item_renterorder.house_name}}</view>
								<view class="renter_tips">{{item_renterorder.show_name}}</view>
							</view>
							<view class="renter_phone">{{item_renterorder.customer_phone}}</view>
						</view>
						<view class="house_detail">
							<view class="house_name">{{item_renterorder.house_name}}</view>
							<view class="house_info">{{item_renterorder.house_direction}}·{{item_renterorder.house_area}}·{{item_renterorder.house_floor}}</view>
							<view class="house_info">{{item_renterorder.house_addr}}</view>
							<!-- <view class="house_tips">
								<view class="tips">{{item_renterorder.house_tips1}}</view>
								<view class="tips">{{item_renterorder.house_tips2}}</view>
							</view> -->
							<view class="house_money">¥ {{item_renterorder.house_money}}/月</view>
						</view>
					</view>
					<view class="btn_2" v-if="item_renterorder.status.status == '2' ">
			<view class="btn_submit" style="background-color: #999999;margin-left: 330upx;" @click="cancel(index_renterorder)">拒绝入住</view>
			<view class="btn_submit" style="background-color: #63D0D5;margin-left: 20upx;" @click="confirm(index_renterorder)">确认入住</view>
					</view>
					
				</view>

				<!-- 显示待续租 -->
				<view v-if="tabid == '3' && renterorderList[index_renterorder].status.status == '5'">
					<view class="house_view">
						<view class="house_renter">
							<view class="renter_state">{{item_renterorder.status.msg}}</view>
							<view class="renter_info">
								<image class="renter_img" :src="item_renterorder.user_avatar"></image>
								<view class="renter_name">{{item_renterorder.customer_name}}</view>
							</view>
							<view class="renter_tips_view">
								<view class="renter_tips">{{item_renterorder.real_name}}</view>
								<view class="renter_tips">{{item_renterorder.house_name}}</view>
								<view class="renter_tips">{{item_renterorder.show_name}}</view>
							</view>
							<view class="renter_phone">{{item_renterorder.customer_phone}}</view>
						</view>
						<view class="house_detail">
							<view class="house_name">{{item_renterorder.house_name}}</view>
							<view class="house_info">{{item_renterorder.house_direction}}·{{item_renterorder.house_area}}·{{item_renterorder.house_floor}}</view>
							<view class="house_info">{{item_renterorder.house_addr}}</view>
							<!-- <view class="house_tips">
								<view class="tips">{{item_renterorder.house_tips1}}</view>
								<view class="tips">{{item_renterorder.house_tips2}}</view>
							</view> -->
							<view class="house_money">¥ {{item_renterorder.house_money}}/月</view>
						</view>
					</view>
				</view>

				<!-- 显示待退租 -->
				<view v-if="tabid == '4' && renterorderList[index_renterorder].status.status == '3'">
					<view class="house_view">
						<view class="house_renter">
							<view class="renter_state">{{item_renterorder.status.msg}}</view>
							<view class="renter_info">
								<image class="renter_img" :src="item_renterorder.user_avatar"></image>
								<view class="renter_name">{{item_renterorder.customer_name}}</view>
							</view>
							<view class="renter_tips_view">
								<view class="renter_tips">{{item_renterorder.real_name}}</view>
								<view class="renter_tips">{{item_renterorder.house_name}}</view>
								<view class="renter_tips">{{item_renterorder.show_name}}</view>
							</view>
							<view class="renter_phone">{{item_renterorder.customer_phone}}</view>
						</view>
						<view class="house_detail">
							<view class="house_name">{{item_renterorder.house_name}}</view>
							<view class="house_info">{{item_renterorder.house_direction}}·{{item_renterorder.house_area}}·{{item_renterorder.house_floor}}</view>
							<view class="house_info">{{item_renterorder.house_addr}}</view>
							<!-- <view class="house_tips">
								<view class="tips">{{item_renterorder.house_tips1}}</view>
								<view class="tips">{{item_renterorder.house_tips2}}</view>
							</view> -->
							<view class="house_money">¥ {{item_renterorder.house_money}}/月</view>
						</view>
					</view>
					<view class="btn_2" v-if="item_renterorder.status.status == 3 ">
		<view class="btn_submit" style="background-color: #999999;margin-left: 330upx;" @click.stop="reject(index_renterorder)" >拒绝退租</view>
		<view class="btn_submit" style="background-color: #63D0D5;margin-left: 20upx;" @click.stop="refund(index_renterorder)" >同意退租</view>
					</view>

				</view>
				
				<!-- 显示已退租 -->
				<view v-if="tabid == '5' && renterorderList[index_renterorder].status.status == '4'">
					<view class="house_view">
						<view class="house_renter">
							<view class="renter_state">{{item_renterorder.status.msg}}</view>
							<view class="renter_info">
								<image class="renter_img" :src="item_renterorder.user_avatar"></image>
								<view class="renter_name">{{item_renterorder.customer_name}}</view>
							</view>
							<view class="renter_tips_view">
								<view class="renter_tips">{{item_renterorder.real_name}}</view>
								<view class="renter_tips">{{item_renterorder.house_name}}</view>
								<view class="renter_tips">{{item_renterorder.show_name}}</view>
							</view>
							<view class="renter_phone">{{item_renterorder.customer_phone}}</view>
						</view>
						<view class="house_detail">
							<view class="house_name">{{item_renterorder.house_name}}</view>
							<view class="house_info">{{item_renterorder.house_direction}}·{{item_renterorder.house_area}}·{{item_renterorder.house_floor}}</view>
							<view class="house_info">{{item_renterorder.house_addr}}</view>
							<!-- <view class="house_tips">
								<view class="tips">{{item_renterorder.house_tips1}}</view>
								<view class="tips">{{item_renterorder.house_tips2}}</view>
							</view> -->
							<view class="house_money">¥ {{item_renterorder.house_money}}/月</view>
						</view>
					</view>
					
				
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	//导入接口请求文件
	import {
		Request
	} from '../../../../utils/request.js';
	//定义getApp对象
	const app = getApp();
	let page = 3
	let seach_number = 3
	export default {
		data() {
			return {
				tabid: '1',
				renterorderList: []
			}
		},
		methods: {
			//切换顶部tab标签
			changeTab: function(index) {
				this.tabid = index
			},
			/**
			* 操作订单接口模板
			* index-> 订单列表的索引值
			* url-> 请求接口URL地址参数
			*/
			operation:function(index,url){
				new Request(url).request(
					() => {
						return 'POST'
					},
					() => {
						return {
							openid: app.globalData.openid,
							order_id: this.renterorderList[index].order_id,
							DevelopVersion: app.globalData.DevelopVersion,
							project: app.globalData.project,
						}
					},
					(res) => {
						new Request().showToast(res.data.msg,'none',()=>{
							setTimeout(function(){
								uni.navigateBack({
								    delta: 1,
								});
							},2001);
						});
					}
				);
				return;
			},
			//拒绝退租
			reject:function(index){
				let url = 'landboos/operationorder/Reject_Moeny_Order/RejectOrder';
				this.operation(index,url);
			},
			//同意退款
			refund:function(index){
				let url = 'landboos/operationorder/Agree_Moeny_Order/AgreeOrder';
				this.operation(index,url);
			},
			//确认入住
			confirm:function(index){
				let url = 'landboos/operationorder/Confirm_Order/ConfirmOrder';
				this.operation(index,url);
			},
			//拒绝入住
			cancel:function(index){
				let url = 'landboos/operationorder/Refund_Order_Point/RefundOrder';
				this.operation(index,url);
			},
			//确认/取消用户入住
			confirms: function(state, index) {
				new Request('landboos/Confirm_Room/ConfirmCustomerRoom').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							openid: app.globalData.openid,
							room_id: this.renterorderList[index].room_id,
							order_id: this.renterorderList[index].order_id,
							button_type: state,
							DevelopVersion: app.globalData.DevelopVersion,
							project: app.globalData.project,
						}
					},
					(res) => {
						if (res.data.code == '0') {
							uni.showToast({
								title: '操作失败',
								icon: 'none',
								position: 'center'
							})
						} else if (res.data.code == '-2') {
							uni.showToast({
								title: '房间还没有出租',
								icon: 'none',
								position: 'center'
							})
						} else if (res.data.code == '-3') {
							uni.showToast({
								title: '房间租客已经逾期了,不可确认入住',
								icon: 'none',
								position: 'center'
							})
						} else if (res.data.code == '-4') {
							uni.showToast({
								title: '房间已经入住了',
								icon: 'none',
								position: 'center'
							})
						} else if (res.data.code == '-5') {
							uni.showToast({
								title: '房间已经拒绝入住了',
								icon: 'none',
								position: 'center'
							})
						} else if (res.data.code == '-6') {
							uni.showToast({
								title: '房间已经退款成功了',
								icon: 'none',
								position: 'center'
							})
						} else if (res.data.code == '-7') {
							uni.navigateTo({
								url: '/pages/mine/owner/takephoto/takephoto',
								success: (res) => {
									uni.showToast({
										title: '需要上传账单才可以确认入住',
										icon: 'none',
										position: 'center'
									})
								}
							})
						} else {
							uni.navigateTo({
								url: '/pages/mine/owner/rentermanage/rentermanage',
								success: (res) => {
									uni.showToast({
										title: '操作成功',
										icon: 'success',
										position: 'center'
									})
								}
							})
						}
					}
				)
			},
			//上拉加载
			loadMore: function() {
				new Request('landboos/Get_Room_List/GetLandBoosOrderRoom').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							condition: 'all',
							openid: app.globalData.openid,
							seach_number: seach_number,
							page: page,
						}
					},
					(res) => {
						if (res.data.code == '0') {
							new Request().showToast('没有更多数据了', 'none', () => {})
						} else if (res.data.code == '1') {
							page += seach_number
							this.renterorderList = this.renterorderList.concat(res.data.data)
							console.log(this.renterorderList)
						}
					}
				)
			},
		},
		onLoad() {
			//租客订单
			seach_number = 3
			page = 3
			new Request('landboos/Get_Room_List/GetLandBoosOrderRoom').request(
				() => {
					return 'POST'
				},
				() => {
					return {
						condition: 'all',
						openid: app.globalData.openid,
						seach_number: seach_number,
						page: 0
					}
				},
				(res) => {
					console.log(res)
					if (res.data.code == '0') {
						uni.showToast({
							title: '没有订单',
							icon: 'none',
							position: 'center'
						})
					} else if (res.data.code == '1') {
						this.renterorderList = res.data.data
					}
				}
			)
		},
		//上拉加载,调用loadMore
		// onReachBottom() {
		// 	var that = this
		// 	setTimeout(function() {
		// 		that.loadMore()
		// 	}, 300);
		// },
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	/*
		顶部tab样式
	*/
	.content_1 {
		margin: 0 65upx;
		margin-top: 30upx;
	}

	.tab_view {
		height: 60upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tab_box {
		height: 45upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.tab_name {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #333333;
	}

	.tab_line {
		height: 5upx;
		width: 44upx;
		background-color: #B3E9DC;
	}



	/*
		订单详细样式
	*/
	.content_2 {
		margin-top: 40upx;
		padding-bottom: 150upx;
	}

	.house_view {
		height: 246upx;
		background-color: #FFFFFF;
		border-radius: 15upx;
		padding: 27upx 24upx;
		display: flex;
		align-items: center;
		margin-top: 40upx;
	}

	.house_renter {
		width: 304upx;
		height: 246upx;
		margin-right: 24upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.renter_state {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #FFC26D;
		font-weight: bold;
	}

	.renter_info {
		height: 80upx;
		display: flex;
		align-items: center;
	}

	.renter_img {
		height: 80upx;
		width: 80upx;
		border-radius: 80upx;
		margin-right: 20upx;
		background-color: #b1b1b1;
	}

	.renter_name {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #666666;
	}

	.renter_tips_view {
		height: 40upx;
		display: flex;
		align-items: center;
	}

	.renter_tips {
		height: 40upx;
		line-height: 40upx;
		font-size: 20upx;
		color: #666666;
		border: 2upx solid #FFC26D;
		border-radius: 10upx;
		padding: 0upx 10upx;
		margin-right: 10upx;
		white-space: nowrap;
	}

	.renter_phone {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #666666;
	}

	.house_detail {
		height: 258upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.house_name {
		height: 43upx;
		line-height: 43upx;
		font-size: 32upx;
		color: #333333;
	}

	.house_info {
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.house_tips {
		height: 30upx;
		display: flex;
	}

	.tips {
		height: 30upx;
		line-height: 30upx;
		color: #FFFFFF;
		font-size: 20upx;
		background-image: linear-gradient(to right, #87ECC6, #8ED5EE); //颜色渐变效果(从左到右)
		margin-right: 16upx;
		padding: 0upx 20upx;
	}

	.house_money {
		height: 46upx;
		line-height: 46upx;
		font-size: 34upx;
		color: #FFC26D;
	}

	.btn_2 {
		height: 70upx;
		background-color: #FFFFFF;
		padding-bottom: 30upx;
		display: flex;
		white-space: nowrap;
	}

	.btn_submit {
		width: 185upx;
		height: 70upx;
		line-height: 70upx;
		border-radius: 10upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 28upx;
	}
</style>
